<template>
  <div style="width: 400px;height: 120px;padding-top:1px;" id="echarts2">
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'echarts2',
    data () {
      return {
        // option配置
        option: {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              color: [
                '#323eaa',
                '#289ffb',
                '#21cefe',
                '#0040f7',
                '#1c92ff'
              ],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              data: [
                { value: 2.5, name: '采购' },
                { value: 2.5, name: '销售' },
                { value: 2.5, name: '生产' },
                { value: 2.5, name: '财务' },
                { value: 2.5, name: '库存' }
              ],
              emphasis: {
                label: {
                  show: true,
                  fontSize: 35,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
            }
          ]
        }
      }
    },
    mounted () {
      this.echartsInit()
    },
    methods: {
      echartsInit () {
        // 在生命周期中挂载
        echarts.init(document.getElementById('echarts2')).setOption(this.option)
      }
    }
  }
</script>

<style scoped>

</style>
